<template>
    <view class="container">
        <u-popup :show="isPopupVisible" :close-on-click-overlay="false" mode="bottom" border-radius="16">
            <view class="popup-content">
                <view class="popup-header">
                    <view class="header-title">
                        退款原因
                    </view>
                    <view class="close-icon" @click="closePopup">
                        <u-icon size="20" name="close" />
                    </view>
                </view>
                <u-radio-group v-model="selectedReason">
                    <u-cell-group>
                        <u-cell v-for="(option, index) in refundReasons" :key="index" :title="option.dictLabel"
                            clickable @click="selectReason(option.dictCode, option.dictLabel)">
                            <template #icon>
                                <u-radio :name="`${option.dictCode}--${option.dictLabel}`" />
                            </template>
                        </u-cell>
                    </u-cell-group>
                </u-radio-group>
                <view class="popup-footer">
                    <u-button class="cancel-button" type="default" round @click="closePopup">取消</u-button>
                    <u-button class="confirm-button" type="primary" round @click="submitReason">确定</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { reasonRefundCause} from "../../../utils/api/local";
export default {
    data() {
        return {
            selectedReason: '',
            isPopupVisible: false,
            refundReasons: []
        }
    },
    mounted() {
        this.fetchRefundReasons();
    },
    methods: {
        /** 打开弹窗 */
        handleOpen(data) {
            this.isPopupVisible = true;
            if (data) {
                this.selectedReason = `${data.dictCode}--${data.dictLabel}`;
            }
        },
        closePopup() {
            this.isPopupVisible = false;
        },
        /** 获取退款原因 */
        fetchRefundReasons() {
            reasonRefundCause().then((res) => {
                this.refundReasons = res.data || [];
                /** 设置默认值 */
                if (this.refundReasons.length > 0) {
                    this.selectedReason = `${this.refundReasons[0].dictCode}--${this.refundReasons[0].dictLabel}`;
                }
            })
        },
        selectReason(code, label) {
            this.selectedReason = `${code}--${label}`;
        },
        submitReason() {
            this.$emit('onSubReson', this.selectedReason);
            this.closePopup();
        }
    }
}
</script>

<style scoped>
.container {
    width: 100%;
}

.popup-content {
    padding: 20rpx;
}

.popup-header {
    position: relative;
    margin-bottom: 20rpx;
}

.header-title {
    text-align: center;
    font-size: 32rpx;
}

.close-icon {
    position: absolute;
    top: 0;
    right: 0;
}

.popup-footer {
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
}

.cancel-button,
.confirm-button {
    width: 316rpx;
}

.cancel-button {
    margin-right: 20rpx;
}
</style>
